<template>
  <div>
    <h3>银行卡余额{{ money }}</h3>
    <button @click='money = money + 10000'>发工资</button>
    <button @click='money = money - 20'>干饭</button>
    <button @click='changeAge'>花花长了一岁</button>
    <button @click='changePerson'>他变了</button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            money: 100,
            obj:{
                name:'花花', // 顶流女明星 大熊猫 panda
                age:3
            },
            // 监听这个人各个变化
            person:{
                name:'嫌疑犯',
                age:18,
                desc:'喜欢踩点，蹦迪，唱跳rap'
            }
        }
    },
    methods:{
        changeAge(){
            this.obj.age++
        },
        changePerson(){
            this.person.age++
        }
    },
    watch:{
        // 监听data中money改变
        // 1.1. 第一种写法
        // money(newVal, oldVal){
        //     console.log('尊敬的Vip用户，你的余额变更为'+newVal, '原来是' + oldVal)
        // },
        // 1.2. 第二种写法
        'money'(newVal, oldVal){
            console.log('尊敬的Vip用户，你的余额变更为'+newVal, '原来是' + oldVal)
        },

        // 2.监听对象中的某个值
        'obj.age'(newVal, oldVal){
            console.log(`花花的年龄现在是${newVal}, 原来是${oldVal}`)
        },

        // 3. 监听一个对象的所有属性，只要有一个变化了，就会触发
        person:{
            deep:true,
            immediate:true, // 一进入页面，首先执行一次
            // 对于复杂类型的监听，newVal和oldVal 会指向同一个对象，所以oldVal意义不大
            // handler(val, oldVal){
            //     console.log(val, oldVal)
            //     console.log(val === oldVal)
            // }
            handler(val){
                console.log(val)
            }
        }
        
    }
}
</script>

<style>

</style>